<template>
  <view class="container">
    <!-- 分类标签栏 -->
    <view class="tab-bar">
      <view class="tab-item">附件小区</view>
      <view class="tab-item">交通</view>
      <view class="tab-item">学校</view>
      <view class="tab-item">医院</view>
      <view class="tab-item">银行</view>
    </view>
    <!-- 内容展示区域 -->
    <view class="content-area">
      <view class="community-item" v-for="(item, index) in communityList" :key="index">
        <view class="community-thumb">
          <image src="https://via.placeholder.com/120x100" mode="aspectFill" />
        </view>
        <view class="community-info">
          <view class="community-name">{{ item.name }}</view>
          <view class="community-price">{{ item.price }}元/m</view>
          <view class="community-count">{{ item.count }}套在售</view>
          <view class="community-address">{{ item.address }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      communityList: [
        {
          name: "阳光城檀府",
          price: "8000",
          count: "170",
          address: "上高xx路134号"
        },
        {
          name: "德和沁园",
          price: "6000",
          count: "170",
          address: "上高xx路134号"
        },
        {
          name: "恒大泸州",
          price: "7000",
          count: "170",
          address: "上高xx路134号"
        }
      ]
    };
  }
};
</script>

<style>
.container {
  padding: 20rpx;
  background-color: #f5f5f5;
}

.tab-bar {
  display: flex;
  margin-bottom: 20rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.tab-item {
  padding: 15rpx 25rpx;
  font-size: 28rpx;
  color: #666;
  border-radius: 10rpx;
  margin-right: 15rpx;
  background-color: #fff;
}

.content-area {
  background-color: #fff;
  padding: 20rpx;
  border-radius: 10rpx;
}

.community-item {
  display: flex;
  align-items: flex-start;
  padding: 20rpx 0;
  border-bottom: 1rpx solid #e0e0e0;
}

.community-thumb {
  width: 120rpx;
  height: 100rpx;
  margin-right: 20rpx;
  overflow: hidden;
}

.community-info {
  flex: 1;
}

.community-name {
  font-size: 30rpx;
  color: #333;
  margin-bottom: 10rpx;
}

.community-price {
  color: #666;
  font-size: 28rpx;
  margin-bottom: 5rpx;
}

.community-count {
  color: #999;
  font-size: 26rpx;
  margin-bottom: 5rpx;
}

.community-address {
  color: #999;
  font-size: 26rpx;
}
</style>